<template>
  <div class="daoer" style="height: 100%;">
    <header>

    </header>

    <section style="overflow-y: auto; height: 100%;">
      <el-collapse v-model="activeName" accordion @change="changeItem">
        <el-collapse-item v-for="(item,index) in parkList" :name="index">
          <template slot="title">
            {{ item.parkName }}
            <!-- <el-button type="primary" size="mini" @click.stop="updataRules(item,index)" style="position: absolute;right: 50px;">拉取规则</el-button> -->
          </template>
          <el-table :data="monthRuleList" border>
            <el-table-column label="会员卡类型" width="180px" align="center">
              <template slot-scope="scope">
                {{ scope.row.uniformRentType | uniformRentTypeFilter }}
              </template>
            </el-table-column>
            <el-table-column label="天数" prop="days" align="center" width="180px"></el-table-column>
            <el-table-column label="车场售价" prop="parkAmount" width="120px" align="center"></el-table-column>
            <el-table-column label="平台售价" width="120px" prop="amount" align="center"></el-table-column>
            <el-table-column label="白天夜间时间" width="120px" align="center">
              <template slot-scope="scope">
                {{ scope.row.beginTime }} - {{ scope.row.endTime }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="单双系统" align="center" width="280px"></el-table-column> -->
            <el-table-column label="B端是否展示" width="120px" align="center">
              <template slot-scope="scope">
                {{scope.row.ownerStatus | statusFilter}}
              </template>
            </el-table-column>
            <el-table-column label="C端是否展示" width="120px" align="center">
              <template slot-scope="scope">
                {{scope.row.clientStatus | statusFilter}}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120px">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="editShow = true,row=scope.row">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </section>

    <footer>

    </footer>

    <el-dialog :visible.sync="editShow" width="800px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <edit v-if="editShow" :row = "row" @closeDialog="editShow = false"/>
    </el-dialog>


  </div>
</template>

<script>
  import edit from './components/edit.vue'

  export default {
    components: { edit },
    filters: {
      uniformRentTypeFilter(type) {
        switch(type) {
          case 1:
            return '全天年卡';
          case 2:
            return '全天季卡';
          case 4:
            return '全天月卡';
          case 100:
            return '白天月卡';
          case 110:
            return '夜间月卡';
        }
      },
      statusFilter(status) {
        return status == 0 ? '否' : '是'
      },
    },
    data() {
      return {
        form: null,
        parkList: [],
        activeName: '1',
        editShow: false,
        monthRuleList: [],
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        // oldUniformRentType: null,
        selectedRow: null,
        options: [],
        ruleTime: [],
        // ifSubmit: false
      }
    },
    mounted() {
      this.getParkList();//  获取停车场列表
      this.getOption();
    },
    methods: {
      /**
       * 获取停车场列表
       */
      getParkList() {
        this.$axios({
          method: 'get',
          url: '/park/park-info/get-month-park',
          params: this.searchForm
        }).then((res) => {
          this.parkList = res.data.records;
        })
      },

      // updataRules(item,index) {
      //   this.$axios({
      //     method: 'post',
      //     url: '/promotion/month-rule-pull/update-park-month-rule',
      //     data: this.$qs.stringify({parkId: item.parkId})
      //   }).then(res => {
      //     if(res.code == 200) {
      //       this.$message.success('更新规则成功');
      //       this.changeItem(index);
      //     } else {
      //       this.$message.warning(res.desc)
      //     }
      //   })
      // },

      getOption() {
        this.$axios({
          method: 'get',
          url: '/promotion/month-rule/getMonthRuleType'
        }).then((res) => {
          if(res.code == 200) {
            this.options = res.data;
          }
        })
      },

      seeRule(row) {
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule-pull/getParkMonthRuleByParkId',
          data: this.$qs.stringify({parkId: row.parkId})
        }).then((res) => {
          res.data.forEach(item => {
            item.clientStatus = item.clientStatus == 1 ? true : false;
            item.ownerStatus = item.ownerStatus == 1 ? true : false;
            if(item.beginTime != null && item.endTime != null) {
              item.beginTime= item.beginTime.slice(11,16);
              item.endTime= item.endTime.slice(11,16);
            }
          })
          this.monthRuleList = res.data;
        })
      },
      /**
       * 开启关闭
       */
      switchStatus(e,row) {
        this.updateMonthRulePull(row);
      },

      updateMonthRulePull(updateForm) {
        let url;
        if(updateForm.ruleId == null) {
          url = "/promotion/month-rule-pull/add-month-rule"
        } else {
          url = "/promotion/month-rule-pull/update-month-rule"
        }
        if(updateForm.days != null && updateForm != '' && (updateForm.uniformRentType != null && updateForm.uniformRentType != '') && (updateForm.parkAmount != null && updateForm.parkAmount != '') && (updateForm.amount != null && updateForm.amount != '') && (updateForm.monthRentName != null && updateForm.monthRentName != '')) {
          this.form = JSON.parse(JSON.stringify(updateForm))
          this.form.ownerStatus = updateForm.ownerStatus == true ? 1 : 0;
          this.form.clientStatus = updateForm.clientStatus == true ? 1 : 0;
          this.form.pullId = updateForm.id;
          this.$axios({
            method: 'post',
            url: url,
            data: this.form
          }).then((res) => {
            if(res.code == 200) {
              this.$message.success('修改信息成功');
              this.seeRule(updateForm);
            } else {
              // oldUniformRentType
              // this.selectedRow.uniformRentType
              this.$message.warning(res.desc)
            }
          })
        } else {
          this.$message.warning('请输入完整信息')
        }
      },
      /**
       * 选择日期
       */
      // changeTime(row) {
      //   console.log(row)
      //   // if((row.beginTime && row.endTime) || (row.beginTime == null && row.endTime == null)) {
      //   //   this.updateMonthRulePull(row);
      //   // }
      // },
      /**
       * 监听数据变化
       */
      changeRule(value, row) {
        this.selectedRow = row
        let rule = this.options.filter((option) => {
          return option.code == value;
        });
        row.uniformRentType = value;
        row.monthRentName = rule[0].name;
        row.days = rule[0].days;
      },

      changeItem(index) {
        if(this.parkList[index]) {
          this.$axios({
            method: 'get',
            url: '/promotion/month-rule/get-month-rule-by-park-id',
            params: {parkId: this.parkList[index].id}
          }).then((res) => {
            if(res.code == 200) {
              res.data.forEach(item => {
                if(item.beginTime && item.endTime) {
                  item.beginTime = item.beginTime.slice(10,16);
                  item.endTime = item.endTime.slice(10,16);
                }
              })
              this.monthRuleList = res.data;
            }
          })
        }

      }
    }
  }
</script>

<style scoped>
  .el-collapse-item {
    position: relative;
  }



</style>
